<template>
  <div>
    新密码:<input type="text" v-model="money">
    <hr>
    旧密码:<input type="text" v-model="count">
  </div>
  <div>地址:{{user.address.province}}</div>
  <button @click="updateUser">更新数据</button>

</template>

<script setup>
import { objectToString } from '@vue/shared';
import { ref,watch } from 'vue';
const money = ref('')
const count = ref('')
// ref,reactive将数据转换为响应式的时候,不管对象层级有多深
// 只要值的属性是复杂数据类型,都会进行一个响应式的包裹
const user =ref({
  name:'朱志文',
  age:18,
  address:{
    province:'湖北省'
  }
})
// 第一种写法 基础写法监听某个数据的变化,参数发生改变调用回调
/* watch(money,(money,oldMoney)=>{
  console.log(money,oldMoney);
}) */

//第二种写法 带两个参数且同时监听多个数据当任意一个参数发生改变则调用回调函数
/* watch([money,count],([money,count],[oldMoney,oldCount])=>{
  console.log('新值',money,count);
  console.log('旧值',oldMoney,oldCount);
}) */

// 第三种写法 带三个参数且监听复杂数据类型
// 当监听复杂数据类型时如果watch不写deep时间听不到改数据的改变的
// 凡是看到对象层级比较深的情况就需要加一个watch的配置
const updateUser = () => {
  user.value.address.province = '河南省'
}
watch(
  user,
  val =>{
    console.log(val);
  },
  {
    immediate:true,
    deep:true
  }
)

// 特殊情况:如果要监听对象里某个具体属性的时候,不能直接写obj.value.a
//要以函数的形式写
// const obj = ref({
//   a:1,
//   b:2
// })
// watch(
//   ()=>obj.value.a,
//   (val) => {
//     console.log(val);
//   }
// )
</script>